import React from "react";
import { useTasks, useTaskTypes } from "server";
import { KanbanType } from "types";
import { useTasksModal, useTasksSearchParams } from "./util";
import taskIcon from "assets/task.svg";
import bugIcon from "assets/bug.svg";
import styled from "@emotion/styled";
import { Button, Card, Dropdown, Menu, Modal } from "antd";
import CreateTaks from "./create-task";
import Mark from "components/mark";
import { useDeleteKanban } from "server";
import { Row } from "components/lib";
import { Drag, Drop, DropChild } from "components/drag-and-drop";

const TaskTypeIcon: React.FC<{ id: number }> = (props) => {
  const { data: taskTypes } = useTaskTypes();
  const name = taskTypes?.find((t) => t.id === props.id)?.name;
  if (!name) {
    return null;
  }

  return <img src={name === "task" ? taskIcon : bugIcon} alt="" />;
};

export const Container = styled.div`
  min-width: 27rem;
  border-radius: 6px;
  background: rgb(244, 245, 247);
  display: flex;
  flex-direction: column;
  padding: 0.7rem 0.7rem 1rem;
  margin-right: 1.5rem;
`;

const TaskContainer = styled.div`
  overflow: auto;
  flex: 1;
  ::-webkit-scrollbar {
    display: none;
  }
`;

const More: React.FC<KanbanType> = (props) => {
  const { mutateAsync } = useDeleteKanban();

  const onDelete = () => {
    Modal.confirm({
      okText: "确定",
      cancelText: "取消",
      title: "确定删除看板吗?",
      onOk: () => {
        return mutateAsync(props.id);
      },
    });
  };

  const overlay = (
    <Menu>
      <Menu.Item onClick={onDelete}>删除</Menu.Item>
    </Menu>
  );

  return (
    <Dropdown overlay={overlay}>
      <Button type="link">...</Button>
    </Dropdown>
  );
};

const KanbanColumn = React.forwardRef<HTMLDivElement, { kanban: KanbanType }>(
  ({ kanban, ...props }, ref) => {
    const { data: allTasks } = useTasks(useTasksSearchParams());
    const { name: keyword } = useTasksSearchParams();
    const { startEdit } = useTasksModal();
    const tasks = allTasks?.filter((t) => t.kanbanId === kanban.id);

    return (
      <Container {...props} ref={ref}>
        <Row between>
          <h3>{kanban.name}</h3>
          <More {...kanban} key={kanban.id} />
        </Row>
        <TaskContainer>
          <Drop type="ROW" direction="vertical" droppableId={`${kanban.id}`}>
            <DropChild>
              {tasks?.map((task, index) => {
                return (
                  <Drag key={task.id} index={index} draggableId={`${task.id}`}>
                    <div>
                      <Card
                        key={task.id}
                        style={{ marginBottom: "0.5rem" }}
                        onClick={() => startEdit(task.id)}
                      >
                        <div>
                          <Mark keyword={keyword} name={task.name} />
                        </div>
                        <TaskTypeIcon id={task.typeId} />
                      </Card>
                    </div>
                  </Drag>
                );
              })}
            </DropChild>
          </Drop>
          <CreateTaks kanbanId={kanban.id} />
        </TaskContainer>
      </Container>
    );
  }
);

export default KanbanColumn;
